<template>
    <div class="picContainer">
        <IHeader class="header" back="true" title="图片详情"></IHeader>
        <div class="wrap">
            <slider class="slider" @change="indexChange">
                <div class="frame" v-for="(img, idx) in imageList" :key="idx">
                    <image class="gonggaoImg" :src="img.picture" resize="contain"></image>
                </div>
            </slider>
            <text class="order">{{'(' + imageIndex + '/' + imageList.length + ')'}}</text>
        </div>
    </div>
</template>

<script>
import IHeader from '@/components/header'
// const modal = weex.requireModule('modal')
export default {
  name: 'picDetail',
  data () {
    return {
      imageList: [],
      imageIndex: 1
    }
  },
  methods: {
    indexChange (event) {
      this.imageIndex = event.index + 1
    }
  },
  mounted: function () {
    this.imageList = this.$route.query.picList
  },
  components: {
    IHeader
  }
}
</script>
<style>
</style>
<style scoped>
    .picContainer{
        background-color: rgb(43,48,64)
    }
    .slider {
        width: 750px;
        height: 750px;
        /*margin-left: 25px;*/
    }
    .frame {
        width: 750px;
    }
    .gonggaoImg{
        width: 750px;
        height: 750px;
    }
    .wrap{
        width: 750px;
        /*height: 900px;*/
        margin-top: 180px;
    }
    .order{
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 750px;
        line-height: 80px;
        color: rgb(206,206,206);
        font-size: 36px;
        text-align: center;
        font-family: bold;
    }
</style>
